<template>
   <van-cell   class="article-item"
   :to="{
     name:'article',
     params:{
       articleId: artObj.art_id
      }}">
     <!-- 顶部内显示 -->
     <template #title >
       <div class="title van-multi-ellipsis--l2">{{artObj.title}}</div>
      </template>
     <!-- 下面内容显示 -->
     <template #label>
       <!-- 判断是否显示下面三张图片显示 -->
       <div v-if="artObj.cover.type === 3" class="cover-wrap">
         <div class="cover-item"
         v-for="(img,index) in artObj.cover.images"
         :key="index">
            <van-image class="cover-item-img"   fit="cover"  :src="img" />
         </div>
       </div>
       <!-- 底部作者时间评论数显示 -->
       <div class="label-info-wrap">
         <span>{{artObj.aut_name}}</span>
         <span>{{artObj.comm_count}}评论</span>
         <span>{{artObj.pubdate | relativeTime}}</span>
       </div>
     </template>
     <!-- 右边一张图片 -->
     <template #default  v-if="artObj.cover.type === 1">
       <van-image
        fit="cover"
        class="right-cover"
        :src="artObj.cover.images[0]"
      />
     </template>
   </van-cell>
</template>

<script>
export default {
  name: 'articleItem',
  components: {},
  props: {
    artObj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
.article-item {
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }
  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }
  .right-cover {
    width: 232px;
    height: 146px;
  }
  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
  .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        width: 100%;
        height: 146px;
      }
    }
  }
}
</style>
